<template>
	<div>
		<RadioGroup v-model="poker.my">
			<Radio :label="0">栏目1</Radio>
			<Radio :label="1">栏目2</Radio>
			<Radio :label="2">栏目2</Radio>
		</RadioGroup>
		<div class="currentCards">
			<div class="cc-item" v-for="(item, index) in poker.nowCard">{{ item.num }}</div>
		</div>
		<div class="user">
			<div class="cards">
				<div class="cards-item" v-for="(item, index) in poker.user.cards" @click="poker.user.select(item)">
					<div class="cards-card" :class="{ 'selected': item.selected }">
						{{ item.num }}
					</div>
				</div>
			</div>
			<Row>
				<block v-if="poker.nowUser == poker.my">
					<Button type="default" @click="poker.user.confirm()">操作</Button>
					<Button type="default" @click="poker.user.skip()">跳过</Button>
				</block>
			</Row>
		</div>
		<div class="box"></div>
		<Button type="default" @click="poker.start()">操作</Button>
	</div>
</template>
<script>
import Poker from './251020.poker';
import { CardTypeSize, CardManager } from './251020.poker';
export default {
	data() {
		return {
			poker: new Poker({
				context: this
			})
		}
	},
	methods: {
		testType() {
			let cm = new CardManager();
			let compare = new CardTypeSize();
			let flag = false;
			let cards = []
			cards = [cm.getCard(0, 3), cm.getCard(0, 3)];
			flag = compare.isPair(cards);
			console.log('isPair', flag);

			cards = [cm.getCard(0, 3), cm.getCard(0, 3), cm.getCard(1, 3)];
			flag = compare.isSame3(cards);
			console.log('isSame3', flag);
			cards = [cm.getCard(0, 3), cm.getCard(0, 3), cm.getCard(1, 3), cm.getCard(1, 4), cm.getCard(2, 4)];
			flag = compare.isSame32(cards);
			console.log('isSame32', flag);

			// cards = [cm.getCard(0, 3), cm.getCard(0, 4), cm.getCard(1, 5), cm.getCard(1, 6), cm.getCard(2, 7)];
			// flag = compare.isOrder5More(cards);
			// console.log('isOrder5More 34567', flag);

			// cards = [cm.getCard(0, 1), cm.getCard(0, 2), cm.getCard(1, 3), cm.getCard(1, 4), cm.getCard(2, 5)];
			// flag = compare.isOrder5More(cards);
			// console.log('isOrder5More 12345', flag);

			cards = [cm.getCard(0, 9), cm.getCard(0, 10), cm.getCard(0, 11), cm.getCard(1, 12), cm.getCard(1, 13), cm.getCard(2, 1)];
			flag = compare.isOrder5More(cards);
			console.log('isOrder5More 9 10 11 12 13 1', flag);

			cards = [cm.getCard(0, 9), cm.getCard(1, 9), cm.getCard(2, 9), cm.getCard(3, 9)];
			flag = compare.isBomb(cards);
			console.log(`isBomb 9999`, flag);

			cards = [cm.getCard(0, 9), cm.getCard(1, 9), cm.getCard(2, 9), cm.getCard(3, 9)];
			flag = compare.isBomb(cards);
			console.log(`isBomb 9999`, flag);

			cards = [cm.getCard(0, 9), cm.getCard(1, 9), cm.getCard(2, 9), cm.getCard(3, 10), cm.getCard(3, 10), cm.getCard(3, 10), cm.getCard(3, 11), cm.getCard(3, 11), cm.getCard(3, 11)];
			flag = compare.isBigPlane(cards);
			console.log(`isBigPlane 999101010111111`, flag);

			cards = [cm.getCard(0, 12), cm.getCard(1, 12), cm.getCard(2, 12), cm.getCard(3, 13), cm.getCard(3, 13), cm.getCard(3, 13), cm.getCard(3, 1), cm.getCard(3, 1), cm.getCard(3, 1)];
			flag = compare.isBigPlane(cards);
			console.log(`isBigPlane 121212131313111`, flag);

			cards = [cm.getCard(0, 11), cm.getCard(0, 11), cm.getCard(0, 11), cm.getCard(0, 12), cm.getCard(1, 12), cm.getCard(2, 12), cm.getCard(3, 13), cm.getCard(3, 13), cm.getCard(3, 13), cm.getCard(3, 1), cm.getCard(3, 1), cm.getCard(3, 1)];
			flag = compare.isBigPlane(cards);
			console.log(`isBigPlane 111111121212131313111`, flag);

			cards = [cm.getCard(0, 1), cm.getCard(0, 1), cm.getCard(0, 1), cm.getCard(0, 2), cm.getCard(1, 2), cm.getCard(2, 2), cm.getCard(3, 3), cm.getCard(3, 3), cm.getCard(3, 3)];
			flag = compare.isBigPlane(cards);
			console.log(`isBigPlane 111222333`, flag);

			cards = [cm.getCard(0, 1), cm.getCard(0, 1), cm.getCard(0, 2), cm.getCard(1, 2), cm.getCard(3, 3), cm.getCard(3, 3)];
			flag = compare.isPairPlane(cards);
			console.log(`isPairPlane 112233`, flag);

			cards = [cm.getCard(0, 1), cm.getCard(0, 1), cm.getCard(0, 2), cm.getCard(1, 2), cm.getCard(3, 3), cm.getCard(3, 3), cm.getCard(3, 4), cm.getCard(3, 4)];
			flag = compare.isPairPlane(cards);
			console.log(`isPairPlane 11223344`, flag);
		},
		testCompare() {
			const ctype = new CardTypeSize()
			let cm = new CardManager();
			let c1, c2;
			c1 = [cm.getCard(0, 4)];
			c2 = [cm.getCard(0, 3)]
			console.log('single 4>3', ctype.compare(c1, c2))

			c1 = [cm.getCard(0, 4), cm.getCard(0, 4)];
			c2 = [cm.getCard(0, 3), cm.getCard(0, 3)]
			console.log('pair 44>33', ctype.compare(c1, c2))

			c1 = [cm.getCard(0, 4), cm.getCard(0, 4), cm.getCard(0, 4)];
			c2 = [cm.getCard(0, 3), cm.getCard(0, 3), cm.getCard(0, 3)]
			console.log('same3 444>333', ctype.compare(c1, c2))
			c1 = [cm.getCard(0, 4), cm.getCard(0, 4), cm.getCard(0, 4), cm.getCard(0, 5), cm.getCard(0, 5)];
			c2 = [cm.getCard(0, 3), cm.getCard(0, 3), cm.getCard(0, 3), cm.getCard(0, 5), cm.getCard(0, 5)]
			console.log('same32 44455>33355', ctype.compare(c1, c2))

			c1 = [cm.getCard(0, 3), cm.getCard(0, 4), cm.getCard(0, 5), cm.getCard(0, 6), cm.getCard(0, 7)];
			c2 = [cm.getCard(0, 2), cm.getCard(0, 3), cm.getCard(0, 4), cm.getCard(0, 5), cm.getCard(0, 6)]
			console.log('order5 34567>23456', ctype.compare(c1, c2))

			c1 = [cm.getCard(0, 2), cm.getCard(0, 2), cm.getCard(0, 2), cm.getCard(0, 2)]
			c2 = [cm.getCard(0, 3), cm.getCard(0, 3), cm.getCard(0, 3), cm.getCard(0, 3)];
			console.log('bomb 2222>3333', ctype.compare(c1, c2))

			c1 = [cm.getCard(0, 3), cm.getCard(0, 3), cm.getCard(0, 3), cm.getCard(0, 3)]
			c2 = [cm.getCard(0, 4), cm.getCard(0, 4), cm.getCard(0, 4), cm.getCard(0, 4)];
			console.log('bomb 3333>4444', ctype.compare(c1, c2))

			c1 = [cm.getCard(0, 2), cm.getCard(0, 2), cm.getCard(0, 2), cm.getCard(0, 2)]
			c2 = [cm.getCard(0, 3), cm.getCard(0, 3), cm.getCard(0, 3), cm.getCard(0, 3), cm.getCard(0, 3)];
			console.log('bomb 2222>33333', ctype.compare(c1, c2))

			c1 = [cm.getCard(0, 2), cm.getCard(0, 2), cm.getCard(0, 2), cm.getCard(0, 3), cm.getCard(0, 3), cm.getCard(0, 3), cm.getCard(0, 4), cm.getCard(0, 4), cm.getCard(0, 4)]

			c2 = [cm.getCard(0, 1), cm.getCard(0, 1), cm.getCard(0, 1), cm.getCard(0, 2), cm.getCard(0, 2), cm.getCard(0, 2), cm.getCard(0, 3), cm.getCard(0, 3), cm.getCard(0, 3)]
			console.log('bigplane 222333444>111222333', ctype.compare(c1, c2))

			c1 = [cm.getCard(0, 2), cm.getCard(0, 2), cm.getCard(0, 3), cm.getCard(0, 3), cm.getCard(0, 4), cm.getCard(0, 4)]

			c2 = [cm.getCard(0, 1), cm.getCard(0, 1), cm.getCard(0, 2), cm.getCard(0, 2), cm.getCard(0, 3), cm.getCard(0, 3)]
			console.log('pairplane 223344>112233', ctype.compare(c1, c2))
		},
		add() { }
	},
	watch: {
	},
	created() {

	},
	mounted() {
		//this.testType();
		// this.testCompare();
		this.poker.init();
	},
}
</script>
<style lang="scss" scoped>
.box {
	width: 100px;
	height: 100px;
	border: 1px solid #000;
}
.currentCards {
	display: flex;
	min-height: 50px;
	margin-bottom: 20px;
	margin-top: 20px;
	justify-content: center;
	.cc {
		&-item {
			border: 1px solid grey;
			//background: rgb(196, 190, 190);
			width: 30px;
			height: 50px;
		}
	}
}
.user {
	border: 1px solid #000;
	&.on {
		background: #efefef;
	}
	.cards {
		display: grid;
		grid-template-columns: repeat(18, 1fr);
		grid-auto-rows: 50px;
		gap: 20px 0;
		&-item {
			position: relative;
		}
		&-card {
			border: 1px solid grey;
			//background: rgb(196, 190, 190);
			width: 30px;
			height: 50px;
			position: absolute;
			left: 0;
			top: 0;
			&.selected {
				top: -10px;
			}
		}
	}
}
</style>